import React, { Component } from 'react'
import Crumbs from './../../components/common/Crumbs/index.jsx'
import api from './../../serve/api'
import styles from './ProfessorDetail.module.scss'

const crumbsList = [{
  name : '首页',
  path : '/mainPage/main',
}, {
  name: '智库数据',
  path: '/mainPage/thinkTankData'
},{
  name : '专家详情详情',
  path : '',
}]

export default class ProfessorDetail extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tabs: [{
        name: '籍贯',
        id: 'place'
      }, {
        name: '出生日期',
        id: 'birthday'
      }, {
        name: '职位',
        id: 'job'
      }, {
        name: '专家称号',
        id: 'professorName'
      }, {
        name: '所属单位',
        id: 'company'
      }, {
        name: '学历',
        id: 'edution'
      }, {
        name: '学位',
        id: 'science'
      }, {
        name: '简历',
        id: 'resume'
      }, {
        name: '研究领域',
        id: 'area'
      }, {
        name: '决策咨询成果',
        id: 'result'
      }, {
        name: '学术成果',
        id: 'studyResult'
      }],
      data: {}
    }
  }

  componentDidMount() {
    const {match} = this.props;
    const id = match.params.id;
    this.getDetail(id)
  }

  async getDetail(id) {
    const { code, result } = await api.fetchProfessorInfo({ id })
    if (code !== '000000') {
      return
    }

    const { tabs } = this.state
    tabs[2].info = result.job
    tabs[4].info = result.company || ''
    tabs[5].info = result.edu
    tabs[9].info = result.paper
    tabs[10].info = result.report
    
    this.setState({
      data: result
    })
  }

  scrollToAnchor = (anchorName) => {
    if (anchorName) {
      // 找到锚点
      let anchorElement = document.getElementById(anchorName)
      // 如果对应id的锚点存在，就跳转到锚点
      if(anchorElement) { anchorElement.scrollIntoView('smooth')}
    }
  }


  render() {
    const { tabs, data } = this.state
    
    return (
      <div className={styles.professor_detail_bg}>
        <Crumbs list={crumbsList || []} />
        <div className={styles.professor_detail_container}>
          <div className={styles.professor_anchor_point}>
            <div className={styles.info}> 
              <img src={data.head_img} alt=""/>
              <span>{data.name || ''} &nbsp; 男</span>
              <span style={{ fontSize: 12 }}>{data.job || ''}</span>
            </div>
            <ul>
              {tabs.map((item, index) => {
                return (
                  <li key={index} onClick={() => this.scrollToAnchor(item.id)}>
                    {item.name}
                  </li>
                )
              })}
            </ul>
          </div>
          <div className={styles.professor_detail_content}>
            {tabs.map((item, index) => {
              return (
                item.info && <div key={index} id={item.id}>
                  <h3>{item.name}</h3>
                  <span>{item.info || ''}</span>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
}
